<template>
	<view class="container">
		<view class="header">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="title">校园跑腿</text>
		</view>
		
		<view class="login-form">
			<view class="tab-bar">
				<view class="tab-item" :class="{ active: loginType === 'account' }" @tap="loginType = 'account'">
					账号密码登录
				</view>
				<view class="tab-item" :class="{ active: loginType === 'phone' }" @tap="loginType = 'phone'">
					手机号登录
				</view>
			</view>
			
			<view class="form" v-if="loginType === 'account'">
				<view class="form-item">
					<uni-icons type="person" size="20" color="#999"></uni-icons>
					<input type="text" v-model="form.account" placeholder="请输入账号" />
				</view>
				<view class="form-item">
					<uni-icons type="locked" size="20" color="#999"></uni-icons>
					<input type="password" v-model="form.password" placeholder="请输入密码" />
				</view>
			</view>
			
			<view class="form" v-else>
				<view class="form-item">
					<uni-icons type="phone" size="20" color="#999"></uni-icons>
					<input type="number" v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
				</view>
				<view class="form-item">
					<uni-icons type="locked" size="20" color="#999"></uni-icons>
					<input type="number" v-model="form.code" placeholder="请输入验证码" maxlength="6" />
					<text class="code-btn" :class="{ disabled: counting }" @tap="getCode">
						{{ counting ? count + 's后重试' : '获取验证码' }}
					</text>
				</view>
			</view>
			
			<view class="actions">
				<text class="link" @tap="goToRegister">注册账号</text>
				<text class="link" @tap="goToReset">忘记密码？</text>
			</view>
			
			<view class="submit-btn" @tap="login">
				登录
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loginType: 'account',
			form: {
				account: '',
				password: '',
				phone: '',
				code: ''
			},
			counting: false,
			count: 60
		}
	},
	methods: {
		getCode() {
			if (this.counting) return
			if (!this.form.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				})
				return
			}
			if (!/^1\\d{10}$/.test(this.form.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			// TODO: 调用后端API发送验证码
			this.counting = true
			this.count = 60
			const timer = setInterval(() => {
				this.count--
				if (this.count === 0) {
					clearInterval(timer)
					this.counting = false
				}
			}, 1000)
		},
		login() {
			if (this.loginType === 'account') {
				if (!this.form.account || !this.form.password) {
					uni.showToast({
						title: '请输入账号和密码',
						icon: 'none'
					})
					return
				}
			} else {
				if (!this.form.phone || !this.form.code) {
					uni.showToast({
						title: '请输入手机号和验证码',
						icon: 'none'
					})
					return
				}
			}
			
			uni.showLoading({
				title: '登录中...'
			})
			
			// TODO: 调用后端API登录
			setTimeout(() => {
				uni.hideLoading()
				uni.setStorageSync('token', 'test_token')
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 1000)
		},
		goToRegister() {
			uni.navigateTo({
				url: '/pages/login/register'
			})
		},
		goToReset() {
			uni.navigateTo({
				url: '/pages/login/reset'
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #fff;
	padding: 60rpx 40rpx;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 80rpx;
	
	.logo {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 20rpx;
	}
	
	.title {
		font-size: 48rpx;
		color: $text-color;
		font-weight: bold;
	}
}

.login-form {
	.tab-bar {
		display: flex;
		margin-bottom: 40rpx;
		
		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			color: $text-color-grey;
			padding: 20rpx 0;
			position: relative;
			
			&.active {
				color: $text-color;
				font-weight: bold;
				
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #2979ff;
					border-radius: 2rpx;
				}
			}
		}
	}
	
	.form {
		.form-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid $border-color;
			margin-bottom: 20rpx;
			
			input {
				flex: 1;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
			
			.code-btn {
				font-size: 28rpx;
				color: #2979ff;
				padding-left: 20rpx;
				
				&.disabled {
					color: $text-color-grey;
				}
			}
		}
	}
	
	.actions {
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0;
		
		.link {
			font-size: 28rpx;
			color: $text-color-grey;
		}
	}
	
	.submit-btn {
		height: 90rpx;
		background-color: #2979ff;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 45rpx;
	}
}
</style> 